<template>
  <div class="service-detail">
    <div class="service-header">
      <div class="service-images">
        <el-carousel height="400px">
          <el-carousel-item v-for="(image, index) in service.images" :key="index">
            <img :src="image" :alt="service.title" class="carousel-image">
          </el-carousel-item>
        </el-carousel>
      </div>
      
      <div class="service-info">
        <h1>{{ service.title }}</h1>
        <div class="service-meta">
          <div class="rating">
            <el-rate v-model="service.rating" disabled show-score text-color="#ff9900" />
            <span class="review-count">({{ service.reviewCount }}条评价)</span>
          </div>
          <div class="price">¥{{ service.price }}</div>
        </div>
        
        <div class="service-tags">
          <el-tag v-for="tag in service.tags" :key="tag" size="medium">{{ tag }}</el-tag>
        </div>
        
        <div class="service-description">
          <h3>服务介绍</h3>
          <p>{{ service.description }}</p>
        </div>
        
        <div class="service-features">
          <h3>服务特点</h3>
          <ul>
            <li v-for="feature in service.features" :key="feature">
              <i class="el-icon-check"></i>
              {{ feature }}
            </li>
          </ul>
        </div>
        
        <div class="service-actions">
          <el-button type="primary" size="large" @click="handleBook">立即预约</el-button>
        </div>
      </div>
    </div>

    <!-- 服务详情标签页 -->
    <div class="service-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="服务详情" name="details">
          <div class="tab-content">
            <h3>服务内容</h3>
            <div v-html="service.details"></div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="用户评价" name="reviews">
          <div class="reviews-section">
            <div class="review-summary">
              <div class="overall-rating">
                <h3>总体评分</h3>
                <div class="rating-number">{{ service.rating }}</div>
                <el-rate v-model="service.rating" disabled />
              </div>
              <div class="rating-distribution">
                <div v-for="(count, rating) in service.ratingDistribution" :key="rating" class="rating-bar">
                  <span class="rating-label">{{ rating }}星</span>
                  <el-progress :percentage="(count / service.reviewCount) * 100" :show-text="false" />
                  <span class="rating-count">{{ count }}</span>
                </div>
              </div>
            </div>
            
            <div class="review-list">
              <div v-for="review in service.reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <img :src="review.userAvatar" :alt="review.userName" class="user-avatar">
                  <div class="review-user">
                    <h4>{{ review.userName }}</h4>
                    <el-rate v-model="review.rating" disabled />
                  </div>
                  <span class="review-date">{{ review.date }}</span>
                </div>
                <div class="review-content">
                  <p>{{ review.content }}</p>
                </div>
                <div class="review-images" v-if="review.images && review.images.length">
                  <img v-for="(image, index) in review.images" :key="index" :src="image" :alt="'评价图片' + (index + 1)">
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceDetailPage',
  data() {
    return {
      service: {}, // 初始化服务数据
      activeTab: 'details',
      isLoading: true
    };
  },
  mounted() {
  const serviceId = parseInt(this.$route.params.id); // 确保将字符串转换为数字
  if (serviceId) {
    this.loadServiceDetail(serviceId);
  } else {
    console.error('服务 ID 未传递');
  }
},
methods: {
  loadServiceDetail(id) {
    this.isLoading = true;
    const mockServices = [
  {
    id: 1,
    title: '专业宠物美容套餐',
    price: 199,
    rating: 4.5,
    reviewCount: 128,
    images: [
      require('@/assets/service1.png'),
      require('@/assets/service2.png'),
      require('@/assets/service3.png')
    ],
    tags: ['美容', '洗澡', '剪毛'],
    description: '专业美容师为您提供全方位的美容服务，包括洗澡、剪毛、指甲修剪等。',
    features: [
      '专业美容师一对一服务',
      '进口洗护产品',
      '全程视频监控',
      '免费接送服务',
      '赠送精美照片'
    ],
    details: `<p>这里是宠物美容服务的详细内容，可以包含HTML标签来格式化文本。</p>`,
    ratingDistribution: { 5: 80, 4: 30, 3: 10, 2: 5, 1: 3 },
    reviews: [
      {
        id: 1,
        userAvatar: require('@/assets/avatar-user1.png'),
        userName: '用户1',
        rating: 5,
        date: '2023-10-01',
        content: '服务非常好，宠物美容师非常专业。'
      },
      {
        id: 2,
        userAvatar: require('@/assets/avatar-user2.png'),
        userName: '用户2',
        rating: 4,
        date: '2023-10-02',
        content: '服务不错，但价格有点高。'
      }
    ]
  },
  {
    id: 2,
    title: '豪华宠物寄养服务',
    price: 299,
    rating: 4.8,
    reviewCount: 95,
    images: [
      require('@/assets/service2.png'),
      require('@/assets/service1.png'),
      require('@/assets/service3.png')
    ],
    tags: ['寄养', '看护', '运动'],
    description: '24小时专人看护，独立空间，定期运动，确保宠物安全舒适。',
    features: [
      '独立宠物房间',
      '每日定时运动',
      '专业宠物护理',
      '24小时监控',
      '定期健康检查'
    ],
    details: `<p>这里是宠物寄养服务的详细内容，可以包含HTML标签来格式化文本。</p>`,
    ratingDistribution: { 5: 70, 4: 20, 3: 3, 2: 1, 1: 1 },
    reviews: [
      {
        id: 3,
        userAvatar: require('@/assets/avatar-user3.png'),
        userName: '用户3',
        rating: 5,
        date: '2023-10-03',
        content: '宠物在这里很开心，服务非常周到。'
      },
      {
        id: 4,
        userAvatar: require('@/assets/avatar-user1.png'),
        userName: '用户4',
        rating: 4,
        date: '2023-10-04',
        content: '环境很好，但价格稍贵。'
      }
    ]
  },
  {
    id: 3,
    title: '基础服从训练课程',
    price: 599,
    rating: 4.6,
    reviewCount: 75,
    images: [
      require('@/assets/service3.png'),
      require('@/assets/service1.png'),
      require('@/assets/service2.png')
    ],
    tags: ['训练', '一对一', '基础'],
    description: '专业训练师一对一指导，培养宠物的基本服从性。',
    features: [
      '专业训练师指导',
      '个性化训练计划',
      '基础服从性训练',
      '行为纠正',
      '训练成果报告'
    ],
    details: `<p>这里是宠物训练服务的详细内容，可以包含HTML标签来格式化文本。</p>`,
    ratingDistribution: { 5: 60, 4: 10, 3: 3, 2: 1, 1: 1 },
    reviews: [
      {
        id: 5,
        userAvatar: require('@/assets/avatar-user2.png'),
        userName: '用户5',
        rating: 5,
        date: '2023-10-05',
        content: '训练效果非常好，宠物变得听话多了。'
      },
      {
        id: 6,
        userAvatar: require('@/assets/avatar-user3.png'),
        userName: '用户6',
        rating: 4,
        date: '2023-10-06',
        content: '训练师很专业，但课程时间有点短。'
      }
    ]
  },
  {
    id: 4,
    title: '宠物健康体检套餐',
    price: 399,
    rating: 4.7,
    reviewCount: 110,
    images: [
      require('@/assets/service4.png'),
      require('@/assets/service1.png'),
      require('@/assets/service2.png')
    ],
    tags: ['体检', '疫苗', '健康'],
    description: '全面体检，包括常规检查和疫苗接种，确保宠物健康。',
    features: [
      '全面健康检查',
      '疫苗接种',
      '血液检测',
      'X光检查',
      '健康报告'
    ],
    details: `<p>这里是宠物健康体检服务的详细内容，可以包含HTML标签来格式化文本。</p>`,
    ratingDistribution: { 5: 90, 4: 15, 3: 3, 2: 1, 1: 1 },
    reviews: [
      {
        id: 7,
        userAvatar: require('@/assets/avatar-user1.png'),
        userName: '用户7',
        rating: 5,
        date: '2023-10-07',
        content: '体检非常全面，医生很专业。'
      },
      {
        id: 8,
        userAvatar: require('@/assets/avatar-user2.png'),
        userName: '用户8',
        rating: 4,
        date: '2023-10-08',
        content: '服务不错，但等待时间有点长。'
      }
    ]
  }
];
    const service = mockServices.find(service => service.id === id);
  if (service) {
    this.service = service;
  } else {
    console.error(`未找到 ID 为 ${id} 的服务`);
  }
    this.isLoading = false;
  },
  handleBook() {
    // 检查用户是否已购买服务
    const hasPurchased = this.checkIfPurchased(this.service.id);
    if (hasPurchased) {
      // 如果已购买，跳转到预约页面
      this.$router.push({ path: `/appointment/${this.service.id}` });
    } else {
      // 如果未购买，提示用户先购买服务
      this.$message.warning('请先购买服务再进行预约');
      // 跳转到购买页面
      this.$router.push({ path: `/payment/${this.service.id}` });
    }
  },
  checkIfPurchased(serviceId) {
    // 这里可以根据实际情况检查用户是否已购买服务
    // 例如，从本地存储或 API 中获取用户的购买记录
    const purchasedServices = JSON.parse(localStorage.getItem('purchasedServices') || '[]');
    return purchasedServices.includes(serviceId);
  }}}
</script>

<style scoped>
.service-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 64px;
}

.service-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.service-images {
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-info h1 {
  margin: 0 0 20px;
  font-size: 28px;
  color: #333;
}

.service-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rating {
  display: flex;
  align-items: center;
}

.review-count {
  margin-left: 10px;
  color: #666;
}

.price {
  font-size: 32px;
  color: #f56c6c;
  font-weight: bold;
}

.service-tags {
  margin-bottom: 20px;
}

.service-tags .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.service-description,
.service-features {
  margin-bottom: 30px;
}

.service-description h3,
.service-features h3 {
  margin-bottom: 15px;
  color: #333;
}

.service-features ul {
  list-style: none;
  padding: 0;
}

.service-features li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.service-features i {
  color: #67c23a;
  margin-right: 10px;
}

.service-actions {
  display: flex;
  gap: 20px;
}

.service-actions .el-button {
  flex: 1;
}

.service-tabs {
  margin-top: 40px;
}

.tab-content {
  padding: 20px 0;
}

.reviews-section {
  padding: 20px 0;
}

.review-summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 40px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.overall-rating {
  text-align: center;
}

.rating-number {
  font-size: 48px;
  color: #f56c6c;
  font-weight: bold;
  margin: 10px 0;
}

.rating-distribution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-bar {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.rating-label {
  color: #666;
}

.rating-count {
  color: #666;
  text-align: right;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}

.review-user {
  flex: 1;
}

.review-user h4 {
  margin: 0 0 5px;
}

.review-date {
  color: #999;
}

.review-content {
  margin-bottom: 15px;
  line-height: 1.6;
}

.review-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.review-images img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style> 